<template>
  <div class="main_box" style="margin-top: 10px;">
    <!-- Title -->
    <top_title :formConfig="formConfig">
      <div slot="button">
        <div style="width: 100%;display: flex;justify-content: space-between;">
          <div>
            <el-button size="small" type="primary" @click="getlist(true)">搜索</el-button>
            <el-button size="small" @click="refresh">刷新</el-button>
          </div>
          <div>
            <el-button type="primary" size="small" @click="add">新增</el-button>
          </div>
        </div>
      </div>
    </top_title>

    <el-card>
      <!-- 新增 -->
      <!-- <div style="padding: 10px 0">
        <el-button type="primary" size="small" @click="add">新增</el-button>
      </div> -->
      <!-- Table -->
      <el-table :data="group_list"  style="width: 100%; margin-bottom: 20px" row-key="id"
        :header-cell-class-name="'headercellstyle'" :cell-class-name="'cellstyle'"
        :tree-props="{ children: 'children', children: 'children' }" :loading="loading">
        <el-table-column prop="menu_name" label="菜单名称">
        </el-table-column>
        <el-table-column prop="icon" label="菜单图标"  width="100px">
        </el-table-column>
        <el-table-column prop="order_num" label="排序">
        </el-table-column>
        <el-table-column prop="perms" label="权限标识符">
        </el-table-column>
        <el-table-column prop="component" label="组件路径" :align="'center'">
        </el-table-column>
        <el-table-column prop="status" label="状态" :align="'center'">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status == '0'">
              正常
            </el-tag>
            <el-tag type="danger" v-else>
              停用
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="menu_type" label="菜单类型" :align="'center'">
          <template slot-scope="scope">
            <span v-if="scope.row.menu_type == 'M'" style="color: red;">目录</span>
            <span v-if="scope.row.menu_type == 'C'" style="color: blue">菜单</span>
            <span v-if="scope.row.menu_type == 'F'" style="color: green;">按钮</span>
          </template>
        </el-table-column>
        <el-table-column prop="update_time" label="时间" :align="'center'">
        </el-table-column>
        <el-table-column label="操作" width="200px" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="delMenu(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%" :close-on-press-escape="false"
      :close-on-click-modal="false">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="'120px'" class="demo-ruleForm"
        :label-position="'center'">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单" prop="">
              <treeselect v-model="ruleForm.parent_id" :options="group_list" :normalizer="normalizer" :show-count="true"
                placeholder="请选择上级菜单" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单类型" prop="">
              <el-radio-group v-model="ruleForm.menu_type">
                <el-radio label="M">目录</el-radio>
                <el-radio label="C">菜单</el-radio>
                <el-radio label="F">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="ruleForm.menu_type == 'M' || ruleForm.menu_type == 'C'">
            <el-form-item label="菜单图标" prop="">
              <el-input v-model="ruleForm.icon" style="width: 100%;" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleForm.menu_type == 'M' || ruleForm.menu_type == 'C' || ruleForm.menu_type == 'F'">
            <el-form-item label="菜单名称" prop="menu_name">
              <el-input v-model="ruleForm.menu_name" style="width: 100%;" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleForm.menu_type == 'M' || ruleForm.menu_type == 'C' || ruleForm.menu_type == 'F'">
            <el-form-item label="显示排序" prop="order_num">
              <el-input-number v-model="ruleForm.order_num" style="width: 100%;" controls-position="right" :min="1"
                :max="100"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleForm.menu_type == 'M' || ruleForm.menu_type == 'C'">
            <el-form-item label="是否外链" prop="">
              <el-radio-group v-model="ruleForm.is_frame">
                <el-radio :label="item.value" v-for="item in opotionslist" :key="item.value">{{ item.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleForm.menu_type == 'M' || ruleForm.menu_type == 'C'">
            <el-form-item label="路由地址" prop="">
              <el-input v-model="ruleForm.path" style="width: 100%;" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleForm.menu_type == 'C'">
            <el-form-item label="组件路径" prop="">
              <el-input v-model="ruleForm.component" style="width: 100%;" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleForm.menu_type == 'C' || ruleForm.menu_type == 'F'">
            <el-form-item label="权限字符" prop="">
              <el-input v-model="ruleForm.query" style="width: 100%;" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleForm.menu_type == 'C'">
            <el-form-item label="路由参数" prop="">
              <el-input v-model="ruleForm.perms" style="width: 100%;" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleForm.menu_type == 'C'">
            <el-form-item label="是否缓存" prop="">
              <el-radio-group v-model="ruleForm.is_cache">
                <el-radio :label="item.value" v-for="item in opotionslist" :key="item.value">{{ item.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleForm.menu_type == 'M' || ruleForm.menu_type == 'C'">
            <el-form-item label="显示状态" prop="">
              <el-radio-group v-model="ruleForm.visible">
                <el-radio :label="item.value" v-for="item in opotionslist" :key="item.value">{{ item.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleForm.menu_type == 'M' || ruleForm.menu_type == 'C'">
            <el-form-item label="菜单状态" prop="">
              <el-radio-group v-model="ruleForm.status">
                <el-radio :label="item.value" v-for="item in opotionslist" :key="item.value">{{ item.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="注释" prop="">
              <el-input v-model="ruleForm.icon" type="textarea" :rows="2" placeholder="请输入内容" style="width: 100%;"
                clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div style="display: flex;justify-content: flex-end;">
              <el-button type="primary" size="small" @click="submitForm('ruleForm')">{{ title + "提交"}}</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMenuslist,
  getMenusadd,
  getMenusedit,
  getMenusdel,
  getMenusinfo
} from "@/api/main/menu";
import menulist from './frommenulist.json'
export default {
  name: "",
  components: {},
  data() {
    return {
      // 列表加载状态
      loading: false,
      // 列表类型
      group_list: [],
      // 搜索栏
      formConfig: menulist.formConfig,
      // 提交栏
      rules: menulist.rules,
      // 新增-编辑
      title: "",
      dialogVisible: false,
      ruleForm: {
        id: "",
        parent_id: "1", // 父级
        menu_type: "M", // 类型
        icon: "", // 图标
        menu_name: "", // 菜单名称
        order_num: 1,//显示排序
        is_frame: "1", //是否外链
        path: "", // 路由地址
        component: "", // 组件地址
        query: "", // 参数
        perms: "", // 权限字符
        is_cache: "1", //是否缓存
        visible: "0", //是否显示
        status: "0", //状态
        remark: "" // 注释
      },
      // 选择参数
      opotionslist: [
        {
          value: "0",
          label: "是"
        },
        {
          value: "1",
          label: "否"
        }
      ],
    };
  },
  created() {
    const _this = this;
    this.getlist();
  },
  mounted() { },
  methods: {
    // 刷新
    refresh() {
      this.formConfig.form.menu_name = ""
      this.formConfig.form.status = ""
      this.getlist();
    },
    // 首次获取
    getlist() {
      this.loading = true
      let params = {
        menu_name: this.formConfig.form.menu_name,
        status: this.formConfig.form.status,
      }
      getMenuslist(params)
        .then((res) => {
          if (res.status == 1) {
            this.group_list = res.data;
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch((err) => {
          this.loading = false
        });
    },
    // 新增
    add() {
      this.title = "新增"
      this.dialogVisible = true
      this.ruleForm = {
        id: "",
        parent_id: "1", // 父级
        menu_type: "M", // 类型
        icon: "", // 图标
        menu_name: "", // 菜单名称
        order_num: 1,//显示排序
        is_frame: "1", //是否外链
        path: "", // 路由地址
        component: "", // 组件地址
        query: "", // 参数
        perms: "", // 权限字符
        is_cache: "1", //是否缓存
        visible: "0", //是否显示
        status: "0", //状态
        remark: "" // 注释
      }
    },
    // 修改
    edit(index, row) {
      this.title = "编辑"
      this.dialogVisible = true
      this.ruleForm = {
        id: row.id,
        parent_id: row.parent_id, // 父级
        menu_type: row.menu_type, // 类型
        icon: row.icon, // 图标
        menu_name: row.menu_name, // 菜单名称
        order_num: row.order_num,//显示排序
        is_frame: row.is_frame, //是否外链
        path: row.path, // 路由地址
        component: row.component, // 组件地址
        query: row.query, // 参数
        perms: row.perms, // 权限字符
        is_cache: row.is_cache, //是否缓存
        visible: row.visible, //是否显示
        status: row.status, //状态
        remark: row.remark // 注释
      }
    },
    //表单函数集合
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let parms = {
            id: this.ruleForm.id,
            parent_id: this.ruleForm.parent_id, // 父级
            menu_type: this.ruleForm.menu_type, // 类型
            icon: this.ruleForm.icon, // 图标
            menu_name: this.ruleForm.menu_name, // 菜单名称
            order_num: this.ruleForm.order_num,//显示排序
            is_frame: this.ruleForm.is_frame, //是否外链
            path: this.ruleForm.path, // 路由地址
            component: this.ruleForm.component, // 组件地址
            query: this.ruleForm.query, // 参数
            perms: this.ruleForm.perms, // 权限字符
            is_cache: this.ruleForm.is_cache, //是否缓存
            visible: this.ruleForm.visible, //是否显示
            status: this.ruleForm.status, //状态
            remark: this.ruleForm.remark // 注释
          }
          if (parms.id == "") {
            this.addMenu(parms)
          } else {
            this.editMenu(parms)
          }
        } else {
          return false;
        }
      });
    },
    // 添加菜单
    addMenu(from) {
      getMenusadd(from)
        .then((res) => {
          if (res.status == 1) {
            this.getlist()
            this.dialogVisible = false
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(res.msg);
        });
    },
    // 编辑菜单
    editMenu(from) {
      getMenusedit(from)
        .then((res) => {
          if (res.status == 1) {
            this.getlist()
            this.dialogVisible = false
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(res.msg);
        });
    },
    //删除菜单
    delMenu(val, row) {
      getMenusdel({ id: row.id })
        .then((res) => {
          if (res.status == 1) {
            this.getlist()
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(res.msg);
        });
    },
    // Selecttree 下拉树形结构使用  子节点去除
    normalizer(node) {
      //当子节点也就是children=[]时候去掉子节点
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.menu_name,
        children: node.children
      };
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-table__body-wrapper{
  height: 600px;
  overflow: auto;
}
</style>
